<template>
	<view>
		<!-- 设置 -->
		<myHeader title="修改密码" showBack />
		<view class="info-list-wrap">
			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 新密码输入 -->
				<view class="input-group">
					<text class="label">新密码</text>
					<input v-model="newPassword" password maxlength="20" placeholder="请输入6-20位新密码"
						@input="validateNewPassword" />
					<text class="password-tip" v-if="newPasswordTip">{{ newPasswordTip }}</text>
				</view>

				<!-- 确认新密码输入 -->
				<view class="input-group">
					<text class="label">确认新密码</text>
					<input v-model="confirmPassword" password maxlength="20" placeholder="请再次输入新密码"
						@input="validateConfirmPassword" />
					<text class="password-tip" v-if="confirmPasswordTip">{{ confirmPasswordTip }}</text>
				</view>

				<!-- 密码强度提示（可选） -->
				<view class="password-strength" v-if="newPassword">
					<text>密码强度：</text>
					<text :class="strengthClass">{{ strengthText }}</text>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="footer">
				<button class="submit-btn" :disabled="isSubmitDisabled" @tap="submitForm">
					完成
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from "@/component/header";
	import {
		updatePassword
	} from "@/api"; // 假设修改密码接口
	import http from "@/utils/http.js";

	export default {
		components: {
			myHeader,
		},
		data() {
			return {
				newPassword: '', // 新密码
				confirmPassword: '', // 确认新密码
				newPasswordTip: '', // 新密码提示信息
				confirmPasswordTip: '', // 确认密码提示信息
				strengthText: '', // 密码强度描述
				strengthClass: '', // 密码强度样式类
				isSubmitDisabled: true // 提交按钮是否禁用
			};
		},

		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 校验新密码（实时）
			validateNewPassword() {
				const password = this.newPassword;
				let tip = '';

				// 密码长度校验（6-20位）
				if (password.length < 6 || password.length > 20) {
					tip = '密码需6-20位字符';
				}
				// 密码复杂度校验（至少包含字母+数字）
				else if (!/[A-Za-z]/.test(password) || !/\d/.test(password)) {
					tip = '密码需包含字母和数字';
				} else {
					tip = '';
				}

				this.newPasswordTip = tip;
				this.checkSubmitStatus();
				this.calculatePasswordStrength(password);
			},

			// 校验确认密码（实时）
			validateConfirmPassword() {
				const confirm = this.confirmPassword;
				const newPwd = this.newPassword;
				let tip = '';

				if (confirm !== newPwd) {
					tip = '两次输入的密码不一致';
				} else if (confirm.length > 0 && newPwd.length === 0) {
					tip = '请先输入新密码';
				} else {
					tip = '';
				}

				this.confirmPasswordTip = tip;
				this.checkSubmitStatus();
			},

			// 计算密码强度（可选）
			calculatePasswordStrength(password) {
				let strength = 0;
				let text = '';
				let className = '';

				if (password.length >= 8) strength++;
				if (/[A-Z]/.test(password)) strength++; // 包含大写字母
				if (/[a-z]/.test(password)) strength++;
				if (/\d/.test(password)) strength++;
				if (/[^A-Za-z0-9]/.test(password)) strength++; // 包含特殊符号

				switch (strength) {
					case 0:
					case 1:
						text = '弱';
						className = 'weak';
						break;
					case 2:
					case 3:
						text = '中';
						className = 'medium';
						break;
					case 4:
					case 5:
						text = '强';
						className = 'strong';
						break;
					default:
						text = '';
						className = '';
				}

				this.strengthText = text ? `（${text}）` : '';
				this.strengthClass = className;
			},

			// 检查提交按钮状态
			checkSubmitStatus() {
				const newPwdValid = !this.newPasswordTip;
				const confirmValid = !this.confirmPasswordTip;
				this.isSubmitDisabled = !(newPwdValid && confirmValid && this.newPassword.length >= 6);
			},

			// 提交修改密码表单
			async submitForm() {
				if (this.isSubmitDisabled) return;

				// 最终校验（防止绕过前端验证）
				if (this.newPassword !== this.confirmPassword) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					});
					return;
				}

				if (this.newPassword.length < 6 || this.newPassword.length > 20) {
					uni.showToast({
						title: '密码需6-20位字符',
						icon: 'none'
					});
					return;
				}

				// 组装提交数据
				const formData = {
					password: this.newPassword
				};

				// 调用修改密码接口
				uni.showLoading({
					title: '提交中...'
				});

				const res = await updatePassword(formData);
				if (res) {
					uni.showToast({
						title: '密码修改成功',
						success: () => {
							setTimeout(() => {
								uni.navigateBack(); // 返回上一页
							}, 1500);
						}
					});
				} else {
					uni.showToast({
						title: res.msg || "修改失败",
						icon: "none"
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #141a2e;
		height: 100%;
	}

	.info-list-wrap {
		padding: 16rpx 32rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* 导航栏 */
	.nav-header {
		position: relative;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #141a2e;

		.back-icon {
			position: absolute;
			left: 15px;
			font-size: 24px;
			color: #fff;
		}

		.title {
			color: #3a86ff;
			font-size: 18px;
			font-weight: 500;
		}
	}

	/* 表单容器 */
	.form-container {
		flex: 1;
		padding: 20px 15px;
	}

	.input-group {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 20px;
		position: relative;

		.label {
			display: block;
			font-size: 14px;
			color: #333;
			margin-bottom: 10px;
		}

		input {
			height: 40px;
			font-size: 16px;

			&::placeholder {
				color: #999;
			}
		}

		.password-tip {
			position: absolute;
			bottom: -19px;
			left: 0;
			font-size: 12px;
			color: #ff4d4f;
		}
	}

	/* 密码强度提示 */
	.password-strength {
		margin-top: 8px;
		font-size: 12px;
		color: #666;

		.weak {
			color: #ff4d4f;
		}

		.medium {
			color: #ffa940;
		}

		.strong {
			color: #52c41a;
		}
	}

	/* 底部按钮 */
	.footer {
		padding: 20px 15px 30px;
	}

	.submit-btn {
		width: 100%;
		height: 44px;
		line-height: 44px;
		border-radius: 22px;
		background: #ccc;
		color: #fff;
		font-size: 16px;
		font-weight: 500;
		transition: background 0.3s;

		&:not(:disabled) {
			background: linear-gradient(to right, #3a86ff, #51aaff);
		}

		&::after {
			border: none;
		}
	}
</style>